<template>
	<el-card>
		<el-tabs v-model="activeName">
			<el-tab-pane :label="item.name" :name="item.name" v-for="(item,index) in fuwenbenList">
				<AppConfigFuwenben :type="item.type"></AppConfigFuwenben>
			</el-tab-pane>
			<el-tab-pane label="客服信息" name="客服信息">
				<el-button type="primary" @click="kefuInfoSubmitClick"> 保 存 </el-button>
				<el-form :model="kefuInfoData" ref="wxPayRef" style="margin-top: 20px;" label-width="150">
					<el-form-item label="电话客服" prop="phone" :rules="{required: true, message: '', trigger: 'blur'}">
						<el-input v-model="kefuInfoData.phone" placeholder="" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="客服邮箱" prop="email" :rules="{required: true, message: '', trigger: 'blur'}">
						<el-input v-model="kefuInfoData.email" placeholder="" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="官方客服" prop="line" :rules="{required: true, message: '', trigger: 'blur'}">
						<gz-upload v-model="kefuInfoData.line" rootPath="sys/config/kefu"></gz-upload>
					</el-form-item>
				</el-form>
			</el-tab-pane>

		</el-tabs>
	</el-card>
</template>

<script>
	import {
		Message
	} from "element-ui";
	import AppConfigFuwenben from "./AppConfigFuwenben.vue";
	export default {
		components: {AppConfigFuwenben},
		data() {
			return {
				activeName: "使用协议",
				baseCount: {
					userCount: 0,
					onlineCount: 0,
				},
				fuwenbenList: [{
						name: "使用协议",
						type: "USER_XIEYI"
					},
					{
						name: "隐私政策",
						type: "USER_Yinsi"
					},
					{
						name: "关于我们",
						type: "ABOUT_ME"
					},
				],
				kefuInfoData: {
					phone: "",
					email: "",
					line: "",
					telegram: "",
				},
			};
		},
		mounted() {
			this.initData("USER_XIEYI")
			this.initData("USER_Yinsi")
			this.initData("KEFU_INFO")
			this.initData("ABOUT_ME")
		},
		methods: {
			initData(type) {
				this.$api.appConfigFindByType(type).then(result => {
					if (type == 'USER_XIEYI') {
						this.userXieyi = JSON.parse(result.value)
					} else if (type == 'USER_Yinsi') {
						this.userYinsi = JSON.parse(result.value)
					} else if (type == 'KEFU_INFO') {
						this.kefuInfoData = JSON.parse(result.value)
					} else if (type == 'ABOUT_ME') {
						this.aboutMeData = JSON.parse(result.value)
					}
				})
			},
			userXieyiSubmitClick() {
				this.$refs.userXieyi.validate(async (valid) => {
					if (valid) {
						this.$api.appConfigEdit({
							type: "USER_XIEYI",
							value: JSON.stringify(this.userXieyi)
						});
					}
				});
			},
			userYinsiSubmitClick() {
				this.$refs.userYinsi.validate(async (valid) => {
					if (valid) {
						this.$api.appConfigEdit({
							type: "USER_YINSI",
							value: JSON.stringify(this.userXieyi)
						})
					}
				});
			},
			aboutMeSubmitClick() {
				this.$refs.aboutMeRef.validate(async (valid) => {
					if (valid) {
						this.$api.appConfigEdit({
							type: "ABOUT_ME",
							value: JSON.stringify(this.aboutMeData)
						});
					}
				});
			},
			kefuInfoSubmitClick() {
				this.$api.appConfigEdit({
					type: "KEFU_INFO",
					value: JSON.stringify(this.kefuInfoData)
				})
			},
		},
	};
</script>

<style lang="scss" scoped>

</style>